<template>
  <div class="container">
    <div class="topTips">
      <span class="left">
        用户中心&gt;经纪人列表&gt;经纪人详情&gt;实操考核
      </span>
      <el-button
        type="primary"
        @click="toback()"
      >返回</el-button>
    </div>
    <div class="car-basic">
      <div class="title">
        车辆基础信息
        <div class="panel-tool">
          <a href="javascript:;" class="accordion-collapse" />
        </div>
      </div>
      <div v-if="brokerData.brokerCheckRelBaseInfo" class="content">
        <dl class="">
          <dt>上牌信息</dt>
          <dd>
            <ul>
              <li>
                <b>上牌城市：</b>{{ brokerData.brokerCheckRelBaseInfo.licenseCityName }}
              </li>
              <li>
                <b>所在城市：</b>{{ brokerData.brokerCheckRelBaseInfo.inCityName }}
              </li>
              <li>
                <b>品牌车系：</b>{{ brokerData.brokerCheckRelBaseInfo.modelName }}
              </li>
              <li>
                <b>上牌时间：</b>{{ brokerData.brokerCheckRelBaseInfo.licenseDate | parseTime }}
              </li>
              <li>
                <b>使用性质：</b>{{ brokerData.brokerCheckRelBaseInfo.usedNature | filteruse }}
              </li>
              <li>
                <b>过户次数：</b>{{ brokerData.brokerCheckRelBaseInfo.transferCount }}
              </li>
            </ul>
          </dd>
        </dl>
        <dl class="">
          <dt>车辆信息</dt>
          <dd>
            <ul>
              <li>
                <b>出厂时间：</b>{{ brokerData.brokerCheckRelBaseInfo.factoryDate | parseTime }}
              </li>
              <li>
                <b>变速箱：</b>{{
                  brokerData.brokerCheckRelBaseInfo.gearBox == 0
                    ? "自动"
                    : "手动"
                }}
              </li>
              <li>
                <b>排放标准：</b>{{
                  brokerData.brokerCheckRelBaseInfo.dischargePip | filtePaifang
                }}
              </li>
              <li>
                <b>车身颜色：</b>{{
                  brokerData.brokerCheckRelBaseInfo.carColor | filtercarColor
                }}
              </li>
              <li>
                <b>行驶里程：</b>{{ brokerData.brokerCheckRelBaseInfo.travelMileage }}km
              </li>
              <li>
                <b>过户次数：</b>{{ brokerData.brokerCheckRelBaseInfo.transferCount }}
              </li>
            </ul>
          </dd>
        </dl>
      </div>
    </div>
    <div class="car-people-check">
      <div class="title" @click.stop="active.frist = !active.frist">
        人车验证
        <span
          class="right-info"
        >待批改：<span>{{ unPersionNum }}</span> 通过：<span>{{
          persionPassNum
        }}</span>
          不通过：<span>{{ persionPassNONum }}</span>
          <el-icon
            :class="active.frist ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"
          />
          <!-- <div class="panel-tool">
        </div> -->
        </span>
      </div>
      <div id="frist" class="content" :class="{ hide: active.frist }">
        <div class="wrap">
          <div class="list">
            <span
              v-for="(item, index) in personList"
              :key="index"
              :index="index"
              :class="{ active: index === persionActiveIndex }"
              @click="toCut2(index)"
            >{{ item.type | filterPhoto }}</span>
          </div>
          <div class="img-video-box">
            <img
              v-if="personList[persionActiveIndex]"
              :src="personList[persionActiveIndex].url"
              alt=""
              class="x-center"
            >
          </div>
        </div>
        <div class="bottom-opt">
          <el-button
            plain
            :disabled="persionActiveIndex===0"
            @click="toCut2(--persionActiveIndex)"
          >上一个</el-button>
          <el-button
            type="success"
            @click="fnPassByPersion(persionActiveIndex)"
          >通过</el-button>
          <el-button
            type="danger"
            @click="fnNotPassByPersion(persionActiveIndex)"
          >不通过</el-button>
          <el-button
            plain
            :disabled="personList.length - 1 === persionActiveIndex"
            @click="toCut2(++persionActiveIndex)"
          >下一个</el-button>
        </div>
      </div>
    </div>
    <div class="car-video-check">
      <div class="title" @click.stop="active.second = !active.second">
        车辆照片视频
        <span
          class="right-info"
        >待批改：<span>{{ unList }}</span> 通过：<span>{{ passList }}</span>
          不通过：<span>{{ NopassList }}</span>
          <el-icon
            :class="
              active.second ? 'el-icon-arrow-right' : 'el-icon-arrow-down'
            "
          />
        </span>
      </div>
      <div id="second" class="content" :class="{ hide: active.second }">
        <div class="wrap">
          <div class="list">
            <span
              v-for="(item, index) in list"
              :key="index"
              :class="{ active: index === carActiveIndex }"
              @click="toCut(index)"
            >{{ item.type | filterPhoto }}</span>
          </div>
          <div v-if="list[carActiveIndex]" class="img-video-box">
            <img
              v-if="list[carActiveIndex] && list[carActiveIndex].type !== 'PV'"
              :src="list[carActiveIndex] && list[carActiveIndex].url"
              alt=""
              class="x-center"
            >
            <video
              v-else
              id="my-video"
              class="video-js"
              controls=""
              preload="auto"
              width="100%"
              height="100%"
              poster=""
              data-setup="{}"
              data-id="400"
            >
              <source :src="list[carActiveIndex].url" type="video/mp4">
            </video>
          </div>
        </div>
        <div class="bottom-opt">
          <el-button
            plain
            :disabled="carActiveIndex === 0"
            @click="toCut(--carActiveIndex)"
          >上一个</el-button>
          <el-button
            type="success"
            @click="fnPassBy(carActiveIndex)"
          >通过</el-button>
          <el-button
            type="danger"
            @click="fnNotPassBy(carActiveIndex)"
          >不通过</el-button>
          <el-button
            plain
            :disabled="list.length - 1 === carActiveIndex"
            @click="toCut(++carActiveIndex)"
          >下一个</el-button>
        </div>
      </div>
    </div>
    <div class="car-desc">
      <div class="title" @click.stop="active.third = !active.third">
        车况描述
        <div class="right-info">
          <el-icon
            :class="active.third ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"
          />
        </div>
      </div>
      <div id="third" class="content" :class="{ hide: active.third }">
        <ul>
          <li>
            <b>动力状况：</b>{{ brokerCheckRelDesc.powerStatus | filteABC }}
          </li>
          <li>
            <b>功能状况：</b>{{ brokerCheckRelDesc.funStatus | filteABC }}
          </li>
          <li>
            <b>外观状况：</b>{{ brokerCheckRelDesc.appStatus | filteABC }}
          </li>
          <li>
            <b>车辆内饰：</b>{{ brokerCheckRelDesc.trimStatus | filteABC }}
          </li>
          <li><b>事故等级：</b>{{ brokerCheckRelDesc.troubleLevel }}</li>
        </ul>
        <ul>
          <li style="width: 100%">
            <b> 车况介绍：</b>{{ brokerCheckRelDesc.carDesc }}
          </li>
        </ul>
      </div>
    </div>

    <div class="jiao-car">
      <div class="title" @click.stop="active.four = !active.four">
        交车设置
        <div class="right-info">
          <el-icon
            :class="active.four ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"
          />
        </div>
      </div>
      <div id="four" class="content" :class="{ hide: active.four }">
        <ul>
          <li>
            <b>发布价格：</b>{{ brokerCheckRelSetResponse.publishPrice }}万
          </li>
          <li>
            <b>过户手续是否齐全：</b>{{ brokerCheckRelSetResponse.isProcess == 1 ? "是" : "否" }}
          </li>
          <li>
            <b>车辆是否有抵押：</b>{{ brokerCheckRelSetResponse.isPledge == 1 ? "是" : "否" }}
          </li>
          <li>
            <b>交强险到期时间： </b>{{ brokerCheckRelSetResponse.safeExpire | parseTime }}
          </li>
          <li>
            <b>最快交车时间：</b>{{ brokerCheckRelSetResponse.handDate | parseTime }}
          </li>
        </ul>
        <ul>
          <li style="width: 100%">
            <b> 交车详细地址：</b>{{ brokerCheckRelSetResponse.handAddressId }}
          </li>
        </ul>
        <ul>
          <li style="width: 100%">
            <b> 收款账号：</b>{{ brokerCheckRelSetResponse.accountNoId }}
          </li>
        </ul>
      </div>
    </div>

    <div class="car-promise">
      <div class="title" @click.stop="active.five = !active.five">
        车况承诺书
        <div class="right-info">
          <el-icon
            :class="active.five ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"
          />
        </div>
      </div>
      <div id="five" class="content" :class="{ hide: active.five }">
        <ul>
          <li v-if=" brokerData.brokerCheckRelPromise">
            <b>车况承诺书签署：</b>{{
              brokerData.brokerCheckRelPromise.promiseStatus == 1
                ? "已签署"
                : "未签署"
            }}
          </li>
        </ul>
      </div>
    </div>

    <div style="text-align: center; padding: 60px 0" class="centent">
      <el-button
        type="primary"
        :disabled="status === 2"
        @click="fnSubmit"
      >考核通过</el-button>
    </div>

    <!-- end -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: {
        frist: true,
        second: true,
        four: true,
        five: true,
        third: true
      },
      list: [],
      resultList: [],
      carActiveIndex: 0,
      unList: 0,
      passList: 0,
      NopassList: 0,
      brokerData: {},
      persionActiveIndex: 0,
      personList: [],
      personListResult: [],
      brokerCheckRelDesc: {},
      brokerCheckRelSetResponse: {},
      persionPassNum: 0,
      persionPassNONum: 0,
      unPersionNum: 0,
      id: 0,
      status: 0
    }
  },
  created() {
    // this.id = 83
    const { id, status } = this.$route.query
    this.id = id
    this.status = status
    if (!this.id) return
    this.$get(`/web/brokerCheckRelBase/get/base?userId=${this.id}`).then(
      (res) => {
        if (res.data.code === '0') {
          this.brokerData = res.data.data
          if (this.$route.query.status === 2) {
            this.personList = res.data.data.brokerPersonList.filter(item => item.reviewStatus !== -1)
            this.list = res.data.data.brokerPhotoList.filter(item => item.reviewStatus !== -1)
          } else {
            this.list = res.data.data.brokerPhotoList
            this.personList = res.data.data.brokerPersonList
          }

          this.brokerCheckRelDesc = res.data.data.brokerCheckRelDesc
          this.brokerCheckRelSetResponse =
            res.data.data.brokerCheckRelSetResponse
          this.$nextTick(() => {
            if (this.status === 2) {
              this.list.forEach((item, index) => {
                if (item.reviewStatus !== -1) {
                  this.resultList.push({
                    pvId: item.id,
                    reviewRemake: '',
                    reviewStatus: item.reviewStatus
                  })
                }
              })
              this.personList.forEach((item, index) => {
                if (item.reviewStatus !== -1) {
                  this.personListResult.push({
                    pvId: item.id,
                    reviewRemake: '',
                    reviewStatus: item.reviewStatus
                  })
                }
              })
            } else {
              this.list.forEach((item, index) => {
                this.resultList.push({
                  pvId: item.id,
                  reviewRemake: '',
                  reviewStatus: -1
                })
              })
              this.personList.forEach((item, index) => {
                this.personListResult.push({
                  pvId: item.id,
                  reviewRemake: '',
                  reviewStatus: -1
                })
              })
            }

            this.unList = this.resultList.filter(
              (item) => item.reviewStatus === -1
            ).length
            this.NopassList = this.resultList.filter(
              (item) => item.reviewStatus === 0
            ).length
            this.passList = this.resultList.filter(
              (item) => item.reviewStatus === 1
            ).length
            this.unPersionNum = this.personListResult.filter(
              (item) => item.reviewStatus === -1
            ).length
            this.persionPassNONum = this.personListResult.filter(
              (item) => item.reviewStatus === 0
            ).length
            this.persionPassNum = this.personListResult.filter(
              (item) => item.reviewStatus === 1
            ).length
          })
        }
      }
    )
  },
  methods: {
    toCut(index) {
      if (index < 0) {
        index = 0
      } else if (index > this.list.length - 1) {
        index = this.list.length - 1
      }
      this.carActiveIndex = index
    },
    toCut2(index) {
      if (index < 0) {
        index = 0
      } else if (index > this.personList.length - 1) {
        index = this.personList.length - 1
      }
      this.persionActiveIndex = index
    },
    fnPassBy(index) {
      this.resultList[index].reviewRemake = '通过'
      this.resultList[index].reviewStatus = 1
      this.getNewStatus()
    },
    fnNotPassBy(index) {
      this.resultList[index].reviewRemake = '不通过'
      this.resultList[index].reviewStatus = 0
      this.getNewStatus()
    },
    fnPassByPersion(index) {
      this.personListResult[index].reviewRemake = '通过'
      this.personListResult[index].reviewStatus = 1
      // this.toCut2(++index)
      this.getPersionStaus()
    },
    fnNotPassByPersion(index) {
      this.personListResult[index].reviewRemake = '不通过'
      this.personListResult[index].reviewStatus = 0
      // this.toCut2(++index)
      this.getPersionStaus()
    },
    getNewStatus() {
      this.unList = this.resultList.filter(
        (item) => item.reviewStatus === -1
      ).length
      this.passList = this.resultList.filter(
        (item) => item.reviewStatus === 1
      ).length
      this.NopassList = this.resultList.filter(
        (item) => item.reviewStatus === 0
      ).length
    },
    getPersionStaus() {
      this.unPersionNum = this.personListResult.filter(
        (item) => item.reviewStatus === -1
      ).length
      this.persionPassNum = this.personListResult.filter(
        (item) => item.reviewStatus === 1
      ).length
      this.persionPassNONum = this.personListResult.filter(
        (item) => item.reviewStatus === 0
      ).length
    },
    fnSubmit() {
      if (this.unPersionNum !== 0) {
        this.$message.error('人车认证未批改完成')
        return
      }
      if (this.unList !== 0) {
        this.$message.error('车辆照片视频未批改完成')
        return
      }

      this.$confirm('确认批改内容已无误?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$post(
            `/web/brokerCheckRelBase/addBatch/${this.id}`,
            [...this.resultList, ...this.personListResult],
            'json'
          ).then((res) => {
            if (res.data.code === '0') {
              this.$message.success('提交考核成功')
              this.$router.back()
            } else {
              this.$message.error(res.data.message)
            }
          })
        })
        .catch(() => {})
    },
    toback() {
      console.log(1)
      this.$router.back()
    }
  }
}
</script>

  <style lang='scss' scoped>
.car-people-check > .title,
.car-video-check > .title,
.car-desc > .title,
.car-promise > .title,
.jiao-car > .title {
  cursor: pointer;
}
.container {
  border: 1px solid #e6ebf5;
  margin: 20px;
}

.container .title {
  font-size: 18px;
  font-weight: bold;
  padding: 12px 32px;
  border-bottom: 1px solid #e6ebf5;
  line-height: 24px;
  position: relative;
}

.container .title .panel-tool {
  right: 28px;
}
.right-info {
  position: absolute;
  right: 80px;
  top: 11px;
  font-weight: normal;
  font-size: 14px;
}
.container .content {
  border-bottom: 1px solid #e6ebf5;
  position: relative;
  padding: 16px 40px;
  height: auto;
}
@keyframes example {
  from {
    height: 100px;
  }
  to {
    height: 0;
  }
}
.container .content.hide {
  height: 0;
  overflow: hidden;
  padding: 0;
  animation-name: example;
  animation-duration: 1s;
}

.container .content dl {
  display: flex;
  margin-bottom: 10px;
}
.container .content dt {
  width: 100px;
  font-weight: 800;
  padding-top: 2px;
}
.container .content dd {
  flex: 1;
}
.container .content dl ul {
  padding: 0;
}

.container .content ul {
  display: flex;
  padding: 10px 0;
  flex-direction: row;
  flex-wrap: wrap;
}

.container .content ul li {
  width: 33.3%;
  margin-bottom: 12px;
}
.car-people-check .list {
  /* margin-bottom: 20px; */
}
.car-people-check .list > span,
.car-video-check .list > span {
  display: inline-block;
  padding: 6px 0px;
  color: #999;
  cursor: pointer;
  margin-right: 50px;
  margin-bottom: 12px;
}
.car-people-check .list > span.active,
.car-video-check .list > span.active {
  color: #333;
}
.car-people-check .wrap,
.car-video-check .wrap {
  width: 60%;
  margin: 0 auto;
}
.car-people-check .img-video-box,
.car-video-check .img-video-box {
  height: 300px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
  /* background: url('../../images/transparent.png'); */
}
.car-people-check .img-video-box img,
.car-video-check .img-video-box img {
  position: absolute;
  cursor: zoom-in;
  cursor: -webkit-zoom-in;
}
.car-people-check .img-video-box img.y-center,
.car-video-check .img-video-box img.y-center {
  left: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.car-people-check .img-video-box img.x-center,
.car-video-check .img-video-box img.x-center {
  top: 0;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.bottom-opt {
  width: 600px;
  margin: 0 auto;
  text-align: center;
}
.bottom-opt a {
  outline: none;
}
.bottom-opt .ok.selected,
.bottom-opt .cancel.selected {
  background: #eaf2ff;
  color: #000000;
  border: 1px solid #b7d2ff;
  filter: none;
}
/* end */
.topTips {
  height: 50px;
  line-height: 50px;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  border-bottom: 1px solid #e6ebf5;
}
</style>
